<template>
  <div class="container">
    <label for="radio">
      <input type="radio" name="radio" id="radio" @click="selected" :value="isSelected">
      <span v-if="isSelected">已选</span>
      <span v-else>未选</span>
    </label>
  </div>
</template>

<script>
export default {
  name: 'vue2-radio',
  props: {
    // vue2  组件使用v-model传值， 默认value接收值
    checked: {
      type: Boolean
    }
  },
  data () {
    return {
      isSelected: false
    }
  },
  watch: {
    checked: {
      immediate: true,
      handler (newVal) {
        this.isSelected = newVal
      }
    }
  },
  methods: {
    // 选择事假
    selected () {
      this.$emit('change', !this.isSelected)
    }
  }
}
</script>

<style scoped lang="less">

</style>
